<template>
  <div>
    <CategorySelector @CategoryInfo="CategoryInfo" :popup="popup"></CategorySelector>
    <el-card class="box-card mt">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="popup = false"
        class="mb"
        :disabled="allId.length < 1"
        v-show="popup"
        >添加</el-button
      >
      <el-table
        :data="CategoryAllList"
        border
        style="width: 100%"
        class="mt"
        v-if="popup"
      >
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="attrName" label="属性名"> </el-table-column>
        <el-table-column label="属性值列表">
          <template v-slot="{ row }">
            <el-tag :key="tag.id" v-for="tag in row.attrValueList" class="mr">
              {{ tag.valueName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row, $index }">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="handleEdit($index, row)"
            ></el-button>
            <el-popconfirm
              :title="`确定删除[${row.attrName}]吗？`"
              class="ml"
              @confirm="handleDeleteHome(row)"
            >
              <el-button
                slot="reference"
                size="mini"
                type="danger"
                icon="el-icon-delete"
              ></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div v-else class="mt">
        <el-form label-position="left">
          <el-form-item label="属性名" label-width="60px">
            <el-input
              style="width: 200px"
              placeholder="输入属性名"
              v-model="attrFrom.attrName"
            ></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" size="medium" @click="addValue"
            >添加属性值</el-button
          >
          <el-button size="medium" @click="cancel">取消</el-button>
        </div>
        <el-table
          :data="attrFrom.attrValueList"
          style="width: 100%"
          border
          class="mt mb"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column prop="valueName" label="属性值名称">
            <template v-slot="{ row, $index }">
              <el-input
                v-if="row.Outfocus"
                style="width: 200px"
                v-model.trim="row.valueName"
                ref="inputRef"
                @blur="addValueList(row, $index)"
              ></el-input>
              <div v-else @click="row.Outfocus = true">{{ row.valueName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template v-slot="{ row, $index }">
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(row, $index)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-button type="primary" size="medium" @click="preservation"
            >保存</el-button
          >
          <el-button size="medium" @click="cancel">取消</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import request from "@/api/product/category";
import { cloneDeep } from 'lodash'
export default {
  name: "Category",
  data() {
    return {
      allId: "",
      attrFrom: {
        attrName: "",
        attrValueList: [],
        categoryLevel: 3,
        categoryId: "",
      },
      // 弹出层
      popup: true,
    };
  },
  methods: {
    handleEdit(index, row) {
      this.popup = false
      this.attrFrom = cloneDeep(row)
      console.log(row);
    },
    handleDeleteHome(row) {
      this.DeleteActions(row.id);
      this.Category1Actions(this.allId);
    },
    CategoryInfo(allId) {
      this.allId = allId;
      this.attrFrom.categoryId = allId.Category1Id;
      this.Category1Actions(allId);
    },
    ...mapActions("Category", [
      "Category1Actions",
      "DeleteActions",
      "SaveAttrActions",
    ]),
    // 点击添加属性值
    addValue() {
      this.Outfocus = true;
      this.attrFrom.attrValueList.push({
        valueName: "",
        Outfocus: true,
      });
      this.$nextTick(() => {
        this.$refs.inputRef.focus();
      });
    },
    // 失焦
    addValueList(row, idx) {
      if (!row.valueName.trim()) {
        this.$message.error("不可以输入空值");
        this.attrFrom.attrValueList.splice(idx, 1);
        return;
      }
      let removal = this.attrFrom.attrValueList.some((item, id) => {
        if (id != idx) {
          item.valueName == row.valueName;
        }
      });
      if (removal) {
        this.attrFrom.attrValueList[idx] = {};
        this.$message.warning("请勿重复输入");
        row.Outfocus = true;
      } else {
        this.attrFrom.attrValueList[idx] = { valueName: row.valueName };
        row.Outfocus = false;
      }
    },
    // 点击删除
    handleDelete(row, idx) {
      this.attrFrom.attrValueList.splice(idx, 1);
    },
    // 点击保存
    preservation() {
      if(this.attrFrom.id){
        this.SaveAttrActions(this.attrFrom);
      }else{

        if(this.attrFrom.attrName && this.attrFrom.attrValueList.length){
          this.SaveAttrActions(this.attrFrom);
          
        }else{
          this.$message.error("保存失败");
          return
        }
      }
      this.popup = true;
          this.CategoryInfo(this.allId);
          this.$message.success("保存成功");
          this.attrFrom = {}
    },
    // 取消
    cancel(){
      this.attrFrom = {}
      this.popup = true;
    }
  },
  computed: {
    ...mapState({
      CategoryAllList: (state) => state.Category.CategoryAllList,
    }),
  },
};
</script>

<style>
.el-tag + .el-tag {
  margin: 0 5px 5px 0;
}
</style>
